<style>
  .copyright, .bottom-nav { display: none; }
</style>
<!-- 购物车里面没有东西 -->
<empty name="cartItems">

<div class="empty empty-cart pd10">
  <div class="cart-logo"></div>
  <p class="message">您的购物车空空如也~</p>
  <ul class="lists">
    <li class="lists-item">
      <a href="{$product.url}">去购物</a>
    </li>
  </ul>
</div>

<else/>
<!-- 购物车里面有东西 -->
<div class="pd10">
  <volist name="cartItems" id="vo_product">
  <volist name="vo_product.items" id="vo_attr">
  <section class="cart-lists">
  <header class="good-name">{$vo_product.name}</header>
  <div class="good-info">
    <a class="good-pic"><img src="{:getImageUrl($vo_attr['pic'], 'small')}"></a>
    <div class="info-item">
    <p>
      <span class="key">规格： <foreach name="vo_attr.attrs" item="vo1" key="k">{$k}:{$vo1}&nbsp;&nbsp;</foreach></span>
    </p>
    <p>
      <span class="key sub-price" data-subprice="{$vo_attr.productPrice}">单价：￥{$vo_attr.productPrice}</span>
    </p>
    <div class="clearfix">
      <span class="key fl">数量：</span>
      <span class="product-number"><span class="buy-num-minus" data-business-id="{$vo_attr.businessId}" data-product-id="{$vo_product.productId}">-</span><input class="buy-num" name="quantity" readonly="readonly" value="{$vo_attr.quantity}"><span class="buy-num-plus" data-business-id="{$vo_attr.businessId}" data-product-id="{$vo_product.productId}">+</span></span>
    </div>
    </div>
    <a class="good-del" data-business-id="{$vo_attr.businessId}" data-product-id="{$vo_product.productId}">删除</a>
  </div>
  </section>
  </volist>
  </volist>
  
</div>

<footer class="total-price">
  <form action="{:U('Order/confirmOrder')}" method="post">
  <input type="hidden" name="sid" value="{$sid}">
  <p>合计（不含运费）：<em id="total-price"></em></p>
  <button type="submit" class="btn btn-orange">结算</button>
  </form>
</footer>

<script type="text/javascript">
  (function(){
  
    // 初始计算总价格
    updateTotalPrice();
    
    var oDel = document.querySelectorAll ( ".cart-lists .good-del" );
    for ( var i=0, l = oDel.length; i < l; i++ ) {
      oDel[i].addEventListener ( "click", removeGood, false );
    };
    
    // 从购物车中移除
    function removeGood() {
      var good = {},
      _this = this;
      good.businessId = this.getAttribute( "data-business-id" );
      good.productId = this.getAttribute( "data-product-id" );
      good.sid = {$sid};
      GH.ajax( "__CONTROLLER__/removeItem", good, function(data){
        GH.showMessage( data.msg );
        if ( data.error == 0 ) {
          _this.parentNode.parentNode.style.opacity = 0;
          setTimeout(function(){
            _this.parentNode.parentNode.parentNode.removeChild(_this.parentNode.parentNode);
            updateTotalPrice();
          }, 500);
        }
      }, "post")
    };
    
    // 购买数量的更新
    var  oCartList = document.querySelectorAll ( ".cart-lists" );
    for ( var i=0; item=oCartList[i]; i++ ) {
      var oMinus = item.querySelector ( ".buy-num-minus" ),
      oPlus = item.querySelector ( ".buy-num-plus" );
      oMinus.addEventListener( "click", function(){
        changeNumber ( this, false );
      }, false );
      oPlus.addEventListener( "click", function(){
        changeNumber ( this, true );
      }, false );
    };
    
    function changeNumber( btn, plus ) {
      var input = btn.parentNode.querySelector ( ".buy-num" );
      var v = parseInt( input.value );
      if ( plus ) {
        input.value = v + 1;
      } else {
        ( v <= 1 ) || ( input.value = v - 1 );
      }
      var good = {}; //发送给后台的数据
      good.businessId = btn.getAttribute( "data-business-id" );
      good.productId = btn.getAttribute( "data-product-id" );
      good.quantity = input.value;
      good.sid = {$sid};
      GH.ajax ( "__CONTROLLER__/updateQuantity", good, function(data){
        ( data.error == 1 ) && GH.showMessage ( data.msg );
        ( data.error == 0 ) && updateTotalPrice();
      }, "post" );
    };
    
    // 更新购物车总价钱
    function updateTotalPrice() {
      var  oCartList = document.querySelectorAll ( ".cart-lists" );
      var total = 0; //总价钱
      var count = 0; //购车车总数量
      for ( var i = 0; item = oCartList[i]; i++ ) {
        var subPrice = item.querySelector ( ".sub-price" ).getAttribute( "data-subprice" ),
        number = parseInt( item.querySelector ( ".buy-num" ).value );
        total += subPrice * number;
        count += number;
      }
      document.getElementById( "total-price" ).innerHTML = "￥" + total;
      document.getElementById( "cartCount" ).innerHTML = count;
    }
  })();
    
  (function(){
    window.addEventListener("load", function(){
      //放一个元素留出距离
      var oDiv = document.createElement("div");
      oDiv.style.height = "40px";
      document.body.appendChild( oDiv );
    }, false);
  })();
</script>
</empty>
